<template>
  <!-- style="border:1px solid  red;" :style="{'width':width+'px','height':height+'px'}" -->
  <!-- <div class="echartBox-wrapper" ref="chart" ></div> -->
  <section class="echartBox-wrapper">
    <!-- <div
      class="title-box"
      :style="{
        borderColor: title.direction === 'left' ? '#4193e3' : 'transparent',
        textAlign: title.direction ? title.direction : 'center',
        paddingLeft: title.direction ? '20px' : '0',
      }"
    >
      <span>{{ title.heading }}</span>
      <span v-if="title.secondary">{{ title.secondary }}</span>
    </div> -->
    <div class="echart-box" :ref="id"></div>
  </section>
</template>
<script>
// import { color } from 'echarts/core';
// import * as Echarts from "echarts";
// import "../echarts/index"
// let echarts = require("echarts/lib/echarts");
import echarts from "../echarts/index";
export default {
  props: ["id", "title", "echartsData"],
  data() {
    return {
      chart: null,
    };
  },

  watch: {
    echartsData: {
      handler(newVal) {
        if (newVal) {
          this.initData(this.echartsData.seriesData);
          this.$nextTick(() => {
            this.renderEchart();
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },

  methods: {
    initData(seriesData) {
      if (seriesData) {
        return seriesData.map((item) => {
          let obj = {
            name: item.name,
            type: item.seiresType,
            barWidth: "20",
            data: item.data,
            lineStyle: {},
          };
          // 柱状设置
          // if (item.seiresType === "bar") {
          //   obj.stack = item.seiresType;
          // }
          // 光滑
          if (item.seiresType === "line") {
            obj = Object.assign(obj, { showSymbol: false, smooth: true });
          }
          // 渐变色
          // debugger;
          if (item.lineGradient) {
            obj.areaStyle = {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: item.gradientColor[0],
                },
                {
                  offset: 1,
                  color: item.gradientColor[1],
                },
              ]),
            };
          }
          // 虚线设置
          if (item.serieslineType === "dashed") {
            obj.lineStyle.type = item.serieslineType;
          }
          return obj;
        });
      }
    },
    renderEchart() {
      //2.初始化
      const myChart = echarts.init(this.$refs[this.id]);
      //3.配置数据
      let option = {
        // title: {
        //   text: "用电趋势分析",
        //   x: "center",
        //   top: 10,
        //   textStyle: {
        //     color: "#48A3F9",
        //   },
        // },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(25,62,119,0.4)",
          borderColor: "#4372B9",
          textStyle: {
            color: "#fff",
          },
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
          formatter: (params) => {
            let res = "",
              axisValueLabel = "";
            params.forEach((item) => {
              axisValueLabel = item.axisValue;
              res += `<li>
               ${item.marker} ${item.seriesName} ${item.value}</li>`;
            });
            return `<div>${axisValueLabel}</div>
              <ul>${res}</ul>`;
          },
        },

        legend: {
          data:
            this.echartsData.seriesData &&
            this.echartsData.seriesData.map((item) => item.name),
          right: 20,
          top: 0,
          itemHeight: 4,
          itemWidth: 14,
          textStyle: {
            color: "#fff",
            fontSize: 10,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "8%",
          top: 10,
          containLabel: true,
        },
        color: this.echartsData.color,
        xAxis: [
          {
            type: "category",
            data: this.echartsData.axisData,
            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#4F73A5",
                type: "solid",
              },
            },

            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              show: false, //想要不显示网格线，改为false
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "(Kwh)",
            axisLabel: {
              // formatter: "{value} ml",  // 格式
              textStyle: {
                color: "#fff",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#4F73A5",
                type: "solid",
              },
            },
            splitLine: {
              show: false, //想要不显示网格线，改为false
            },
          },
        ],
        series: this.initData(this.echartsData.seriesData),
        // series: [
        //   {
        //     name: "峰用电",
        //     type: "bar",
        //     stack: "1",
        //     data: [30.0, 20, 30, 24, 48, 39, 40],
        //     barWidth: "14",
        //     itemStyle: {
        //       color: "#339DE9",
        //     },
        //   },
        //   {
        //     name: "平用电",
        //     type: "bar",
        //     stack: "1",
        //     data: [30, 33, 30, 22, 24, 26, 26],
        //     itemStyle: {
        //       color: "#E9BC33",
        //     },
        //   },
        //   {
        //     name: "谷用电",
        //     type: "bar",
        //     stack: "1",
        //     data: [30, 20, 13, 20, 23, 25, 20],
        //     itemStyle: {
        //       color: "#F28244",
        //     },
        //   },
        //   {
        //     name: "实际用电量",
        //     type: "line",
        //     showSymbol: false,
        //     smooth: true,
        //     data: [100, 110, 150, 80, 90, 135, 110],
        //     itemStyle: {
        //       color: "#3EA3D5",
        //     },
        //     areaStyle: {
        //       // opacity: 0.8,
        //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //         {
        //           offset: 0,
        //           color: "rgba(45,113,174,.6)",
        //         },
        //         {
        //           offset: 1,
        //           color: "rgba(11,28,68,.3)",
        //         },
        //       ]),
        //     },
        //   },
        //   {
        //     name: "预计用电量",
        //     type: "line",
        //     showSymbol: false,
        //     smooth: true,
        //     data: [120, 120, 160, 90, 100, 155, 120],
        //     lineStyle: {
        //       color: "#E2B75C",
        //       type: "dashed",
        //     },
        //     itemStyle: {
        //       color: "#E2B75C",
        //       type: "dashed",
        //     },
        //   },
        // ],
      };
      // 4.传入数据
      myChart.setOption(option);
      // 自动调节echarts的大小
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      // 销毁调节echarts的大小
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", () => {
          myChart.resize();
        });
      });
    },
  },
};
</script>
<style lang="scss">
$titleHeight: 30px;
$titleMargin: 6px;
.echartBox-wrapper {
  width: 100%;
  height: 100%;
  // overflow: hidden;
  // .title-box {
  //   height: $titleHeight;
  //   line-height: $titleHeight;
  //   margin: $titleMargin 0;
  //   font-size: 16px;
  //   font-weight: bold;
  //   color: #4193e3;
  // }
  .echart-box {
    height: calc(100% - #{$titleHeight} - 2 * #{$titleMargin});
    width: 100%;
  }
}
</style>
